<template>
  <div>
    <!-- 步骤条 -->
    <el-steps :active="1" simple>
      <el-step title="课程基础信息" icon="el-icon-edit"></el-step>
      <el-step title="课程大纲" icon="el-icon-upload"></el-step>
      <el-step title="课程发布" icon="el-icon-picture"></el-step>
    </el-steps>
    <!-- 表单 -->
    <el-card>
      <el-form
        style="margin-top: 12px;"
        :model="info"
        ref="infoRef"
        label-width="120px"
      >
        <el-form-item label="课程名称">
          <el-input v-model="info.title"></el-input>
        </el-form-item>
        <!-- </el-form-item> -->
        <el-form-item label="课程价格">
          <el-input v-model="info.price"></el-input>
        </el-form-item>

        <el-form-item label="所属讲师">
          <el-select v-model="info.teacherId" clearable placeholder="请选择">
            <el-option
              v-for="item in teacher"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- 级联 -->
        </el-form-item>
        <el-form-item label="所属分类">
          <el-cascader
            :options="subject"
            :value="subject.id"
            clearable
          ></el-cascader>
          <span>//这里无法获取到vaule值 传不了数据 不知道返回值是什么</span>
        </el-form-item>

        <el-form-item label="课时数">
          <el-input v-model="info.lessonNum"></el-input>
        </el-form-item>
        <el-form-item label="课程简介" prop="career">
          <el-input v-model="info.description"></el-input>
        </el-form-item>
        <!-- <el-form-item label="所属讲师" prop="intro">
          <el-input v-model="info.intro"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="intro">
          <el-input v-model="info.intro"></el-input>
        </el-form-item> -->
      </el-form>
      <el-button
        style="margin-top: 12px;"
        :disabled="saveBtnDisabled"
        @click="saveCourseInfo"
        >下一步</el-button
      >
    </el-card>
  </div>
</template>

<script>
import courseApi from "@/api/edu/course";
import subjectApi from "@/api/edu/subject";

export default {
  data() {
    return {
      active: 0,
      saveBtnDisabled: false,
      info: {
        title: "",
        subjectId: "",
        teacherId: "",
        price: 0,
        lessonNum: "",
        description: "",
        cover: "",
        subjectParentId: "",
        teacherName: "",
        subjectName: ""
      },
      // 老师学信息
      teacher: {},
      // 分类信息
      subject: [],
      courseId: "",
      a: "0",
      b: ""
    };
  },
  created() {
    this.selectTeacherAll();
    this.selectSubject();
    // 获取到路由id
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id;
      // 根据课程的id回显内容
      this.getInfoById();
      // console.log(this.$refscascader.getCheckNodes());
      // this.getTeacherById();
    }
  },
  methods: {
    // 添加基础信息 并跳转
    addCourseInfo() {
      courseApi
        .saveCourseInfo(this.info)
        .then(response => {
          this.$message({
            type: "success",
            message: "添加成功"
          });
          // console.log(response);
          this.$router.push({
            path: "/Learning/course/chapter/" + response.data.courseId
          });
          // this.courseId=response.data.+ response.data.courseId
        })
        .catch({});
    },
    // 修改基础信息 并跳转
    updateCourseInfo() {
      courseApi
        .updateInfo(this.info)
        .then(response => {
          this.$message({
            type: "success",
            message: response.message
          });
          // console.log(response);
          this.$router.push({
            path: "/Learning/course/chapter/" + this.courseId
          });
          // this.courseId=response.data.+ response.data.courseId
        })
        .catch({});
    },
    saveCourseInfo() {
      console.log(this.info.id);
      if (!this.info.id) {
        this.addCourseInfo();
      } else {
        this.updateCourseInfo();
      }
    },
    // 讲师下拉框查询
    selectTeacherAll() {
      courseApi
        .selectTeacher()
        .then(response => {
          this.teacher = response.data.teacherAll.data.allList;
          // console.log(this.teacher);
          // console.log(response);
        })
        .catch({});
    },
    // 分类下拉框  级联
    selectSubject() {
      subjectApi
        .getSubjectList()
        .then(response => {
          this.subject = response.data.list;
          // console.log(this.subject);
        })
        .catch(error => {});
    },
    // 回显内容
    // 根据id回显info数据
    getInfoById() {
      courseApi
        .getInfoById(this.courseId)
        .then(response => {
          // console.log(response);
          this.info = response.data.infoById;
          this.teacher.name = this.info.teacherId;
          this.subject.name = this.info.teacherId;
          // console.log(this.info);
        })
        .catch(error => {});
    }
    // 根据id回显老师信息
    // getTeacherById() {
    //   courseApi
    //     .getTeacherById(this.courseId)
    //     .then(response => {
    //       console.log(response);
    //       this.teacher = response.data.teacher;
    //       console.log(this.teacher);
    //     })
    //     .catch(error => {});
    // }
  }
};
</script>
